<template>
    <div class="home">
        <div :class="switchValue ? 'home_top' : 'home_topNav '" style="height: 50px;">
            <div class="home_topLeft">
                <img src="../../../public/客户关系 (1).png" />
                客户关系管理系统
            </div>
            <!-- <div style="margin-bottom: 16px" class="nos">
                <a-radio-group v-model:value="locale">
                    <a-radio-button key="en" :value="enUS.locale">English</a-radio-button>
                    <a-radio-button key="cn" :value="zhCN.locale">中文</a-radio-button>
                </a-radio-group>
            </div> -->
            <div class="home_lefts" style="display: flex; align-items: center;">
                <a-space direction="vertical">
                    <a-input-search v-model:value="searchInput" placeholder="请输入客户名称" style="width: 200px"
                        @search="onSearch" />
                </a-space>

                <el-popover placement="top-start" :width="400" trigger="hover">
                    <div class="top_tit">待办事项</div>
                    <ul class="top_con">
                        <li class="li"><span><span class="span"></span>今日待跟进任务</span><span class="nossss">{{
                        user.followUp }}</span></li>
                        <li class="li"><span><span class="span"></span>今日待会款计划</span><span class="nossss">{{ user.return
                                }}</span></li>
                        <li class="li"><span><span class="span"></span>待处理任务</span><span class="nossss">{{ user.handle
                                }}</span></li>
                        <li class="li"><span><span class="span"></span>待处理工单</span><span class="nossss">{{
                        user.workOrder }}</span></li>
                        <li class="li"><span><span class="span"></span>待处理日程</span><span class="nossss">{{ user.schedule
                                }}</span></li>
                        <li class="li"><span><span class="span"></span>待审批的订单</span><span class="nossss">{{ user.examine
                                }}</span></li>
                        <li class="li"><span><span class="span"></span>带审批的回款</span><span class="nossss">{{
                        user.collection }}</span></li>
                        <li class="li"><span><span class="span"></span>带审批报销</span><span class="nossss">{{
                        user.reimburse }}</span></li>
                    </ul>
                    <template #reference>
                        <el-badge :value="total" class="item">
                            <div @click="matter"><el-icon size="20" color="#f5f4f4">
                                    <TrendCharts />
                                </el-icon>事项</div>
                        </el-badge>
                    </template>
                </el-popover>
                <div @click="schedule"><el-icon size="20" color="#f5f4f4">
                        <List />
                    </el-icon>日程</div>
                <div @click="message"><el-icon size="20" color="#f5f4f4">
                        <BellFilled />
                    </el-icon>消息</div>
                <div @click="lockScreen"><el-icon size="20" color="#f5f4f4">
                        <SwitchFilled />
                    </el-icon>锁屏</div>
                <div @click="manage"><el-icon size="20" color="#f5f4f4">
                        <Tools />
                    </el-icon>管理</div>
                <el-popover placement="top-start" :width="100" trigger="hover">
                    <li style="text-align: center; height: 40px; line-height: 40px;" @click="u_information">修改资料</li>
                    <li style="text-align: center; height: 40px; line-height: 40px;" @click="u_profilePicture">修改头像</li>
                    <li style="text-align: center; height: 40px; line-height: 40px;" @click="u_password">修改密码</li>
                    <li style="text-align: center; height: 40px; line-height: 40px;" @click="u_exit">退出系统</li>
                    <template #reference>
                        <div @click="goTz">
                            <div class="heaTit">
                                <img :src="user.avatar" alt="图片显示失败" />
                                {{ user.employee }}
                                <el-icon>
                                    <ArrowDownBold />
                                </el-icon>
                            </div>
                        </div>
                    </template>
                </el-popover>
            </div>
        </div>
        <!-- <button class="chanButton" @click="toggleDark()">点击切换</button> -->
        <el-container>
            <el-aside class="aside_box">
                <ul class="box_right">
                    <li :index="item.path" v-for="item in list" :key="item.path" @click="jumoToItem(item)"
                        :class="active === item.path ? 'active' : ''">
                        <span class="iconfont" v-html="item.meta.icon"></span>
                        <span>{{ item.meta.title }}</span>
                    </li>
                </ul>
                <ul class="box_left">
                    <li :index="item.path" v-for="item in datalist" :key="item.path"
                        :class="activeTwo === item.path ? 'active' : ''" @click="jumpTwo(item.path)">
                        {{ item.meta.name }}
                    </li>
                </ul>
            </el-aside>
            <el-container style="padding-top: 0; ">
                <el-header class="title_home ">
                    <div>
                        <span @click="jumpTo">🏠️</span>
                        <RouterLink :to="item.path" v-for="item in todoPath.matched">
                            {{ item.meta.name }}
                            <span class="jian">/</span>
                        </RouterLink>
                    </div>

                    <div class="shua" @click="shuaxin">
                        <img src="../../../public/刷新.png" />
                    </div>
                </el-header>
                <!-- <template> -->
                <!--写一个div作为背景，然后加上 ref="vantaRef" -->
                <!-- 在这里编写你的前景模板代码 -->

                <el-main>
                    <div id="W">
                        <!-- <a-config-provider :locale="locale === 'en' ? enUS : zhCN"> -->
                            <router-view :key="valueKey" />
                        <!-- </a-config-provider> -->
                    </div>
                </el-main>
                <!-- </template> -->
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">

// import { CaretBottom } from '@element-plus/icons-vue'
import { User_Type } from '@/type/login'

// import type {v4} from 'uuid'
import { reactive, ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// import { onMounted, ref } from 'vue'



const total = computed(() => {
    // 从用户对象中提取所有属性值并相加
    return Object.values(user.value).filter(val => typeof val === 'number').reduce((acc:any, cur:any) => acc + cur, 0);
});

//用来进行获取用户的基本信息的
onMounted(() => {
    const token: any = localStorage.getItem('token')
    // console.log(JSON.parse(token))
    user.value = JSON.parse(token)
    console.log(user.value)
})

//用来进行中英文切换
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';


import '../../../public/icon_font/iconfont.css'



dayjs.locale('en');
// const datalist = ref()
// const active = ref()
const activeTwo = ref()


//获取用户来进行渲染
const user = ref<User_Type>({
    id: "u1",
    employee: "颜如玉",
    loginaccount: "Windir",
    dept: "销售部",
    pass: "123456",
    job: "administrator",
    avatar: "/head/1.jpg",
    sex: "女",
    birthday: "2009-03-09",
    email: "k.sehfqu@ihpukka.net",
    phone: "13295546366",
    wei: "Brian",
    landline: "13295546366",
    jobNumber: "458845",
    native: "山东省",
    school: "石展",
    education: "研究生",
    speciality: "计算机",
    bei: "一见倾城，在见倾国",
    followUp: 10,
    return: 10,
    handle: 10,
    workOrder: 10,
    schedule: 10,
    examine: 10,
    collection: 10,
    reimburse: 10
})

const locale = ref(enUS.locale);
watch(locale, val => {
    dayjs.locale(val);
});
const datalist = ref<any[]>([
    {
        path: '/home/menu/todo',
        meta: {
            name: '系统首页',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"customTodo"*/ '../menu/todo.vue'
            )
    },
    {
        path: '/home/custom/customTodoA',
        meta: {
            name: '客户列表',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"customTodo"*/ '../custom/customTodo.vue'
            ),
    },
    {
        path: '/home/custom/kehushaixvanA',
        meta: {
            name: '客户筛选',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"kehushaixvan"*/ '../custom/kehushaixvan.vue'
            ),
    },
    {
        path: '/home/custom/xiaoshuoxiansuoA',
        meta: {
            name: '销售线索',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"xiaoshuoxiansuo"*/ '../custom/xiaoshuoxiansuo.vue'
            ),
    },
    {
        path: '/home/business/allbusinessA',
        meta: {
            name: '全部商机',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"allbusiness"*/ '../business/allbusiness.vue'
            ),
    },
    {
        path: '/home/goods/allGoodsA',
        meta: {
            name: '全部订单',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"allGoods"*/ '../goods/allGoods.vue'
            ),
    },
    {
        path: '/home/finance/backguanliA',
        meta: {
            name: '回款管理',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"backguanli"*/ '../finance/backguanli.vue'
            ),
    },
    {
        path: '/home/examine/backExamineA',
        meta: {
            name: '回款审批',
            littleShow: true,
        },
        component: () =>
            import(
                /*webpackChunkName:"backExamine"*/ '../examine/backExamine.vue'
            ),
    }])
const vantaRef = ref(null)
let vantaEffect: any = null


onBeforeUnmount(() => {
    if (vantaEffect) {
        vantaEffect.destroy()
    }
})
let active = ref()
// 设置侧边栏消息zz
const jumoToItem = (data: Object) => {
    datalist.value = data.children.filter(item => item.meta.littleShow)
    console.log(datalist.value);

    active.value = data.path
}
const jumpTwo = (dataTwo: string) => {
    activeTwo.value = dataTwo
    router.push(dataTwo)
}

const isCollapse = ref(true)

const list = useRouter().getRoutes().filter(v => v.meta.isShow)

const router = useRouter()

// 面包屑
const nowPath = useRoute()  //获取当前路由信息
const todoPath = reactive<any>([{ meta: { name: '', title: '菜单' } }])

watch(nowPath, (newVal, oldVal) => {
    Object.assign(todoPath, newVal)
})

const jumpTo = () => {
    router.push('/')
}


// 实现局部刷新
const valueKey = ref(0)
const shuaxin = () => {
    valueKey.value += 1
}
//获取弹出框
const visible = ref(false)
//获取数据的搜索
const searchInput = ref<string>('');
//获取搜素数据方法的
const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
};



// 获取账号的账号名
const token = localStorage.getItem('token')


// 滑块的值
const switchValue = ref(true)

//事项
const matter = () => {
    console.log('我是事项')
}
//日程
const schedule = () => {
    console.log('我是日程')
}
//消息
const message = () => {
    console.log('我是消息')
}
//锁屏
const lockScreen = () => {
    console.log('我是锁屏')
}
//管理
const manage = () => {
    console.log('我是管理')
}
//我是
const goTz = () => {
    console.log('我的')
}

const u_information = ()=>{
    console.log('修改资料')
    router.push('/home/emitUser')
}
const u_profilePicture = ()=>{
    console.log('修改头像')
}
const u_password = ()=>{
    console.log('修改密码')
}
const u_exit = ()=>{
    console.log('退出系统')
    localStorage.removeItem('token')
    router.push('/login')
}

</script>

<style lang="less">
.top_tit {
    // background-color: #facfc3;
    // align-items: center;
    line-height: 50px;
    width: 100%;
    height: 50px;
}

.top_con {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .li {
        height: 40px;
        display: flex;
        align-items: center;
        width: 45%;
        justify-content: space-between;

        .span {
            background-color: black;
            border-radius: 50%;
            width: 5px;
            height: 5px;
            display: inline-block;
            margin-right: 5px;
        }

        .nossss {
            color: red;
        }
    }
}

.heaTit {
    img {
        margin: 10px;
        width: 40px;
        border-radius: 50%;
    }
}

.home_left {
    width: 100%;
    height: 100%;
    display: flex;
    // justify-content: right;
    align-items: center;
}

.nos {
    height: 100%;
    display: flex;
    // flex-direction: column;
    width: 300px;
    justify-content: space-between;
    align-items: center;
}

.chanButton {
    // /* width: 40px;*/
    height: 40px;
    font-size: 40px;
    display: flex;
    padding: 0;
    justify-content: center;
}

.home {
    width: 100%;
    height: 100%;

    .home_top {
        background: radial-gradient(circle, #FF9A9E, #FAD0C4);
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .home_topLeft {
            height: 50px;
            margin-left: 20px;
            line-height: 50px;
            font-weight: bolder;
            font-size: 19px;
            display: flex;
            color: #0079fe;
            display: flex;

            img {
                width: 49px;
                height: 49px;
                margin-right: 15px;
            }
        }

        .home_lefts {
            div {
                margin: 0 5px;
                // min-width: 60px;
                display: flex;
                align-items: center;
                // justify-content: space-between;
            }
        }
    }

    .home_topNav {
        background-color: #1f1f1f;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .home_topLeft {
            height: 50px;
            margin-left: 20px;
            line-height: 50px;
            font-weight: bolder;
            font-size: 19px;
            color: #0079fe;
            display: flex;

            img {
                width: 49px;
                height: 49px;
                margin-right: 15px;
            }
        }
    }

    .title_home {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        background-color: #fff;
        color: #1f1f1f;

        .shua img {
            width: 30px;
            height: 30px;
        }
    }

    .title_homeNav {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        background-color: rgb(43, 43, 43);
        color: #f0f2f5;

        .shua img {
            width: 30px;
            height: 30px;

        }
    }


    .el-container {
        width: 100%;
        height: 100%;
        padding-top: 50px;

        .el-aside {
            width: 240px;
            color: white;
            display: flex;

            .el-menu {
                border: 0;
            }

            .box_right {
                width: 80px;
                background: radial-gradient(circle, #FF9A9E, #FAD0C4);
                height: 100%;
                margin-bottom: 0;
                list-style: none;

                li {
                    height: 80px;
                    width: 100%;
                    color: rgb(25, 129, 206);
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                li:hover {
                    background-color: #f3106f;
                }

                .active {
                    background-color: #f3106f;
                    color: #ffb1be;
                }
            }

            .box_rightNav {
                width: 80px;
                background-color: rgba(24, 24, 24);
                height: 100%;
                margin-bottom: 0;
                list-style: none;

                li {
                    height: 80px;
                    width: 100%;
                    color: white;
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                li:hover {
                    background-color: rgb(55, 55, 61);

                }

                .active {
                    background-color: rgb(55, 55, 61);
                    color: #ffffff;
                }
            }

            .box_left {
                // background:radial-gradient(circle, #ff758c, #ff7eb3);
                background-color: rgb(242, 244, 247);
                color: #666666;
                // width: auto;
                flex: 1;
                margin-bottom: 0;
                border-right: 1px solid #e4e4e4;

                li {
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    cursor: pointer;

                    .iconfont {
                        font-size: 20px;
                    }
                }

                li:active {
                    background-color: #ffffff;
                }

                .active {
                    background-color: #ffffff;
                    color: #0079fe;
                }
            }

            .box_leftNav {
                // background:radial-gradient(circle, #ff758c, #ff7eb3);
                background-color: #666666;
                color: #2b2a2a;
                // width: auto;
                flex: 1;
                margin-bottom: 0;
                border-right: 1px solid #666666;

                li {
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    cursor: pointer;

                    .iconfont {
                        font-size: 20px;
                    }
                }

                li:hover {
                    background-color: #8a8989;
                }

                .active {
                    background-color: #8a8989;
                    color: #e4e4e4;
                }
            }

            .el-menu-vertical-demo[data-v-2c5296db]:not(.el-menu--collapse) {
                height: 100%;
                background-color: #333744;
            }

            .el-menu--collapse {
                height: 100%;
                background-color: #333744;
            }

            .aside_my {
                background-color: #f0f2f5;
                color: #333744;
                padding: 5px;
                border-radius: 50px;
                cursor: pointer;
                font-size: 35px;
                width: 40px;
                height: 40px;

            }

            // 我的信息处弹框
            .el-drawer__body {
                color: black !important;
                padding: 0;

                .mask_top {
                    width: 100%;
                    height: 10vh;
                    background-color: #f2f2f2;
                    color: #999999;
                    font-weight: bolder;
                    line-height: 10vh;
                    padding-left: 15px;
                }

                .mask_nav {
                    padding: 15px;

                    span {
                        color: #999999;
                        font-weight: bolder;
                        margin-right: 15px;
                    }

                }
            }


        }

        .jian {
            margin: 0 10px;
        }

        .el-main {
            width: 100%;
            height: 100%;
            background-color: #f0f2f5;

        }

        #W {
            width: 1400px;
            height: 100%;
            margin: 0 auto;
            // background-color: aquamarine;
            font-family: '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            // overflow: auto;
            // overflow: hidden;
            box-sizing: border-box;
        }

        #WNav {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            background-color: rgb(55, 55, 61);
            font-family: '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            // overflow: auto;
            // overflow: hidden;
            box-sizing: border-box;
        }

        .mainNav {
            background-color: rgb(55, 55, 61);
        }

        #W::-webkit-scrollbar {
            display: none;
        }

    }

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>